<template>
  <div class="newPatentDetails-container-padding">
    <div class="buttonList">
      <el-button type="primary" @click="edit">编辑评审专家信息</el-button>
      <el-button type="danger" @click="del">删除</el-button>
    </div>
    <!-- <AddReview :disabled="!isEdit" :user-info="formInline" @stop="handStop" /> -->
    <div class="title">人员基本信息</div>
    <el-descriptions title="" :column="3">
      <el-descriptions-item
        v-for="item in detailsDescriptions.basicPersonnel"
        :key="item.label"
        :label="item.label"
      >
        {{ formInline[item.value] }}
      </el-descriptions-item>
    </el-descriptions>
    <div class="title">专家信息</div>
    <el-descriptions title="" :column="3">
      <el-descriptions-item
        v-for="item in detailsDescriptions.expertPersonnel"
        :key="item.label"
        :label="item.label"
      >
        {{ formInline[item.value] }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <div class="title">操作日志</div>
    <vxe-grid v-bind="operationLog" :height="height">
      <template #pager>
        <!--使用 pager 插槽-->
        <vxe-pager
          v-model:current-page="tablePage.currentPage"
          v-model:page-size="tablePage.pageSize"
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          :total="tablePage.total"
          @page-change="handlePageChange"
        />
      </template>
    </vxe-grid>
  </div>
</template>

<script setup lang="ts">
  import {
    operationLog,
    detailsDescriptions,
    selectOptions,
    selectMajorOptions,
    selectExpertCategory,
    politicalStatus,
    politicalAffiliationFormater,
    expertTypeFormater,
    technicalPositionFormater,
  } from '../table/column'
  import AddReview from './addReview.vue'
  import { reactive, ref, onMounted } from 'vue'
  import { deleteReview, getReviewsInfo } from '@/api/reviewExperts'
  import { useRoute, useRouter } from 'vue-router'
  import { VxePagerEvents } from 'vxe-table'
  import { useCloseTabNavigate } from '@/utils/useCloseTabNavigate'
  import { useDictStore } from '@/store/modules/dict'

  const isEdit = ref(false)
  const formInline = ref({})
  const route = useRoute()
  const dictStore = useDictStore()
  const sexList = dictStore.getDictType('system_user_sex')
  const id = route.query.id ?? undefined
  const { closeTabNavigate } = useCloseTabNavigate()
  onMounted(() => {
    if (id) {
      getReviewsInfo({ id: id, getType: 2 }).then((res) => {
        formInline.value = res.data
        for (const key in formInline.value) {
          if (key === 'gender') {
            formInline.value[key] = sexList.filter(
              (item) => item.value == formInline.value[key]
            )[0]?.label
          } else if (key === 'politicalAffiliation') {
            formInline.value[key] = politicalAffiliationFormater(
              formInline.value[key]
            )
          } else if (key === 'highestDegree') {
            formInline.value[key] = selectOptions.filter(
              (item) => item.value == formInline.value[key]
            )[0]?.label
          } else if (key === 'technicalPosition') {
            formInline.value[key] = technicalPositionFormater(
              formInline.value[key]
            )
          } else if (key === 'expertType') {
            formInline.value[key] = expertTypeFormater(formInline.value[key])
          }
        }
      })
    }
  })
  const save = () => {
    isEdit.value = false
  }
  const router = useRouter()
  const edit = () => {
    // isEdit.value = true
    router.push({ path: '/reviewExperts/add', query: { id: id } })
  }

  const handStop = (value: boolean) => {
    save()
  }

  const del = () => {
    ElMessageBox.confirm('确定删除该条数据?', '删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      const params = Number(id)
      deleteReview(params).then((res) => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        closeTabNavigate({ name: 'ReviewExperts' })
      })
    })
  }

  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10,
  })

  const handlePageChange: VxePagerEvents.PageChange = ({
    currentPage,
    pageSize,
  }) => {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
    // findList()
  }

  const getInfo = () => {
    const params = {
      id: '',
    }
  }

  const height = ref(0)
  const $baseTableHeight = inject('$baseTableHeight')
  onBeforeMount(() => {
    window.addEventListener('resize', handleHeight)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleHeight)
  })

  const handleHeight = () => {
    height.value = $baseTableHeight(0)
  }
</script>

<style scoped lang="scss">
  $margin-bottom: 20px;

  .buttonList {
    display: flex;
    justify-content: end;
    padding-bottom: $margin-bottom;
    border-bottom: 1px solid #edeff2;
    margin-bottom: $margin-bottom;
  }

  .title {
    border-radius: 2px;
    border-left: 5px solid #1890ff;
    height: 28px;
    background: #f7f8f9;
    font-weight: 500;
    font-size: 14px;
    color: #606266;
    padding-left: 12px;
    line-height: 28px;
    margin-bottom: $margin-bottom;
  }

  .form-inline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;

    :deep(.el-form-item) {
      margin-right: 0;
    }
  }

  .inventor {
    p {
      text-align: left;
    }

    text-align: center;
  }
</style>
